<template>
  <div
    class="ElUpload"
    ref="ElUploadRef"
    @drop="handleDrop"
    @dragover="handleDragOver"
    @dragleave="handleDragleave"
    v-show="ElUpload_show"
  >
    <!-- 上传文件到当前目录下 -->
    拖拽文件到此上传文件
  </div>
</template>

<script setup lang="ts">
import { useAppStoreHook } from "@/store";
const useAppStore = useAppStoreHook();
const ElUpload_show = computed(() => useAppStore.ElUpload_show);
const ElUploadRef = ref(null);
const handleDrop = (event: any) => {
  // console.log("event",event);
  event.preventDefault();

  const items = event.dataTransfer.files;
  console.log("items", [...items]);
  if (items.length) {
    useAppStore.toggle_ElUpload_show(false);
    useAppStore.update_files([...items]);
    useAppStore.toggle_isOpen_uploadList(true);
  } else {
    useAppStore.toggle_ElUpload_show(false);
  }
};
const handleDragOver = (e: any) => {
  console.log(e.target.className);

  e.preventDefault();
  useAppStore.toggle_ElUpload_show(true);
};
const handleDragleave = (e: any) => {
  e.preventDefault();
  useAppStore.toggle_ElUpload_show(false);
};
onMounted(() => {
  document.body.appendChild(ElUploadRef.value);
});
</script>

<style lang="scss" scoped>
.ElUpload {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.6);
  border: 3px dashed #ccc;
  z-index: 1000000;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  color: #999;
  font-size: 40px;
  text-align: center;
  overflow: hidden;
  line-height: 100vh;
}
</style>
